<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  
  <title>JS引用类型 | Storm</title>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <meta name="description" content="1.JS中的类型 基本类型 String Boolean Number undefined Null Symbol  引用类型 Object   对于基本类型，=代表的是值得拷贝，===代表的是值得比较。 对于引用类型，=代表的是引用地址的拷贝，===代表的是引用地址的比较。 2.几个例子深入理解 案例一  12345let a = 1;let b = a;a === b // trueb = 2">
<meta name="keywords" content="JavaScript">
<meta property="og:type" content="article">
<meta property="og:title" content="JS引用类型">
<meta property="og:url" content="https://storm4542.github.io/archives/39d3351.html">
<meta property="og:site_name" content="Storm">
<meta property="og:description" content="1.JS中的类型 基本类型 String Boolean Number undefined Null Symbol  引用类型 Object   对于基本类型，=代表的是值得拷贝，===代表的是值得比较。 对于引用类型，=代表的是引用地址的拷贝，===代表的是引用地址的比较。 2.几个例子深入理解 案例一  12345let a = 1;let b = a;a === b // trueb = 2">
<meta property="og:locale" content="zh-CN">
<meta property="og:updated_time" content="2018-12-12T03:09:05.818Z">
<meta name="twitter:card" content="summary">
<meta name="twitter:title" content="JS引用类型">
<meta name="twitter:description" content="1.JS中的类型 基本类型 String Boolean Number undefined Null Symbol  引用类型 Object   对于基本类型，=代表的是值得拷贝，===代表的是值得比较。 对于引用类型，=代表的是引用地址的拷贝，===代表的是引用地址的比较。 2.几个例子深入理解 案例一  12345let a = 1;let b = a;a === b // trueb = 2">
  
    <link rel="alternative" href="https://storm4542.github.io/atom.xml" title="Storm" type="application/atom+xml">
  
  
    <link rel="icon" href="https://storm4542.github.io/favicon.png">
  
  <link href="static/css/css.css" rel="stylesheet" type="text/css">
  <link rel="stylesheet" href="static/css/style.css">
  

</head></html>
<body>
  <div id="container">
    <div id="wrap">
      <div class="outer">
        <section id="main"><article id="post-JS引用类型" class="article article-type-post" itemscope="" itemprop="blogPost">
  
  <div class="article-inner">
    
      <header class="article-header">
        
  
    <h1 class="article-title" itemprop="name">
      JS引用类型
    </h1>
  

      </header>
    
    <div class="article-meta">
      <a href="" class="article-date">
  <time datetime="2018-12-12T03:08:15.000Z" itemprop="datePublished">2018-12-12</time>
</a>
      
    </div>
    <div class="article-entry" itemprop="articleBody">
      
        <h4 id="1-JS中的类型"><a href="#1-JS中的类型" class="headerlink" title="1.JS中的类型"></a>1.JS中的类型</h4><ul>
<li><p>基本类型</p>
<p>String</p>
<p>Boolean</p>
<p>Number</p>
<p>undefined</p>
<p>Null</p>
<p>Symbol</p>
</li>
<li><p>引用类型</p>
<p>Object</p>
</li>
</ul>
<p>对于基本类型，<code>=</code>代表的是值得拷贝，<code>===</code>代表的是值得比较。</p>
<p>对于引用类型，<code>=</code>代表的是引用地址的拷贝，<code>===</code>代表的是引用地址的比较。</p>
<h4 id="2-几个例子深入理解"><a href="#2-几个例子深入理解" class="headerlink" title="2.几个例子深入理解"></a>2.几个例子深入理解</h4><ul>
<li>案例一</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = <span class="number">1</span>;</span><br><span class="line"><span class="keyword">let</span> b = a;</span><br><span class="line">a === b <span class="comment">// true</span></span><br><span class="line">b = <span class="number">2</span>;</span><br><span class="line">a === <span class="number">1</span> ; <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>基本类型Number，赋值为拷贝，当 <code>b</code>改变的时候不会影响到<code>a</code></p>
<ul>
<li>案例二</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;&#125;;</span><br><span class="line"><span class="keyword">let</span> b = &#123;&#125;;</span><br><span class="line"><span class="keyword">let</span> c = a ;</span><br><span class="line">a === b <span class="comment">//false</span></span><br><span class="line">a === c <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>引用类型Object，比较的是引用地址，<code>a</code>和<code>b</code>的引用地址明显是不同的，所以他们不相等。</p>
<p><code>c</code>得到了<code>a</code>的引用的地址，因此<code>a===c</code></p>
<ul>
<li>案例三</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;<span class="attr">name</span>:<span class="string">'张三'</span>,<span class="attr">info</span>:&#123;<span class="attr">age</span>:<span class="number">11</span>,<span class="attr">sex</span>:<span class="string">'男'</span>&#125;&#125;;</span><br><span class="line"><span class="keyword">let</span> b = a;</span><br><span class="line">b.info.age = <span class="number">22</span>;</span><br><span class="line">a === b <span class="comment">//true</span></span><br><span class="line">a.info.age === <span class="number">22</span> <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>因为<code>a</code>和<code>b</code>指向同一个地址，所以<code>b</code>做修改的时候，<code>a</code>同样修改了。</p>
<ul>
<li>案例四</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;<span class="attr">name</span>:<span class="string">'张三'</span>,<span class="attr">info</span>:&#123;<span class="attr">age</span>:<span class="number">11</span>,<span class="attr">sex</span>:<span class="string">'男'</span>&#125;&#125;;</span><br><span class="line"><span class="keyword">let</span> b = a ; <span class="comment">//展开运算符浅拷贝</span></span><br><span class="line">a === b <span class="comment">//false</span></span><br><span class="line">a.name === b.name <span class="comment">//true</span></span><br><span class="line">a.info === b.info <span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>因为展开运算符是浅拷贝，所以两个对象指向不同的地址，即<code>a!==b</code>。</p>
<p>但是浅拷贝毕竟是浅拷贝。</p>
<p><code>name</code>是基本类型，拷贝的值，所以相同。</p>
<p><code>info</code>为引用类型，拷贝的地址，也相同。</p>
<ul>
<li>案例五</li>
</ul>
<figure class="highlight javascript"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br></pre></td><td class="code"><pre><span class="line"><span class="keyword">let</span> a = &#123;<span class="attr">name</span>:<span class="string">'张三'</span>,<span class="attr">info</span>:&#123;<span class="attr">age</span>:<span class="number">11</span>,<span class="attr">sex</span>:<span class="string">'男'</span>&#125;&#125;;</span><br><span class="line"><span class="keyword">let</span> b = <span class="built_in">JSON</span>.parse(<span class="built_in">JSON</span>.stringify) ; <span class="comment">//深拷贝</span></span><br><span class="line">a === b <span class="comment">//false</span></span><br><span class="line">a.name === b.name <span class="comment">//true</span></span><br><span class="line">a.info === b.info <span class="comment">//false</span></span><br><span class="line">a.info.age === b.info.age<span class="comment">//true</span></span><br></pre></td></tr></table></figure>
<p>深拷贝了，其他的不用说。</p>
<p>因为深拷贝过了，<code>info</code>指向的就是各自的地址了，没啥关系了。</p>
<p>但是基本类型该相同相同。</p>

      

      
        
    </div>
  </div>
  
    
<nav id="article-nav">
  
    <a href="bd208f70.html" id="article-nav-newer" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Newer</strong>
      <div class="article-nav-title">
        
          JS变量提升
        
      </div>
    </a>
  
  
    <a href="30db5aa.html" id="article-nav-older" class="article-nav-link-wrap">
      <strong class="article-nav-caption">Older</strong>
      <div class="article-nav-title">JS中的数组过滤和对象深拷贝</div>
    </a>
  
</nav>

  
</article>


<section id="comments">
  <link rel="stylesheet" href="static/css/default.css">
  <script src="static/js/gitment.browser.js"></script>
  <script>
    var gitment = new Gitment({
      owner: 'your github account',
      repo: 'your repo',
      oauth: {
        client_id: 'your client_id',
        client_secret: 'your client_secret',
      },
    })
    gitment.render('comments')
  </script>
</section>

</section>
        <aside id="sidebar">
  <nav class="menus">
  	<ul>
  		<li><a href="index.html"><i class="icon icon-home"></i></a></li>
  		
			<li><a href="index1.html"><i class="icon icon-fenlei"></i></a></li>
  		
  		
			<li><a href="index2.html"><i class="icon icon-tag"></i></a></li>
  		
  		
  			<li><a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer"><i class="icon icon-github"></i></a></li>
  		
  	</ul>
  </nav>
  <a id="go-top" href="#"><i class="icon icon-up"></i></a>
</aside>

      </div>
      <footer id="footer">
  
	<div id="footer-info" class="inner">
	  &copy; 2019 Storm 
	  - Powered by <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Hexo</a>
	  - Theme <a href="javascript:;" target="_blank" rel="external nofollow noopener noreferrer">Jane</a>
	</div>
</footer>

    </div>
    <nav id="mobile-nav">
  
    <a href="index.html" class="mobile-nav-link">Home</a>
  
    <a href="index1.html" class="mobile-nav-link">Archives</a>
  
    <a href="index2.html" class="mobile-nav-link">Tag</a>
  
    <a href="javascript:;" class="mobile-nav-link" rel="external nofollow noopener noreferrer" target="_blank">Github</a>
  
</nav>
    
<script>
  var disqus_shortname = 'storm';
  
  var disqus_url = 'https://storm4542.github.io/archives/39d3351.html';
  
  (function(){
    var dsq = document.createElement('script');
    dsq.type = 'text/javascript';
    dsq.async = true;
    dsq.src = '//' + disqus_shortname + '.disqus.com/embed.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(dsq);
  })();
</script>


<script src="static/js/jquery.min.js"></script>


  <link rel="stylesheet" href="static/css/jquery.fancybox.css">
  <script src="static/js/jquery.fancybox.pack.js"></script>


<script src="static/js/script.js"></script>

  </div>
</body>
